<template>
	<view class="">
		<view class="searchBox box flex_r_between">
			<view class="search_bgc flex_r_start">
				<image style="width: 24rpx; height: 24.4rpx;margin-right: 8rpx;" src="../../static/homeImg/icon/search@2x.png" mode=""></image>
				<input type="text" v-model="searchValue" @confirm="confirm" placeholder="请输入" placeholder-class="pl" confirm-type="搜索" />
			</view>
			<navigator open-type="navigateBack" delta="1" class="close" >
				取消
			</navigator>
		</view>
		<view class="">
			<view v-if="historySearch.length===0?false:true" class="searchNav box flex_r_between">
				<view class="title">历史搜索</view>
				<view class="qk" @click="empty">
					<image style="width: 24rpx;height: 26rpx;margin-left: 12rpx;" src="../../static/homeImg/icon/search_del@2x.png" mode=""></image>清空
				</view>
			</view>
			<view class="box flex_r_start_wrap" style="padding: 30rpx;">
				<view class="item" @click="confirm1(item)" v-for="(item,index) in historySearch" :key="index">
					{{item}}
				</view>
			</view>
			<view class="searchNav box flex_r_between">
				<view class="title">热门搜索</view>
				<view class="qk" v-if="false">
					<image style="width: 24rpx;height: 26rpx;margin-right: 12rpx;" src="../../static/homeImg/icon/search_del@2x.png" mode=""></image>清空
				</view>
			</view>
			<view class="box flex_r_start_wrap" style="padding: 30rpx;">
				<view class="item" @click="confirm1(item.keyword)" v-for="(item,index) in hotSearch" :key="index">
					{{item.keyword}}
				</view>
			</view>
		</view>
		<uni-popup ref="tishi">
			<uni-popup-dialog>
				
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:'',
				historySearch:[],
				hotSearch:[],
			};
		},
		onLoad(option) {
			this.searchValue=option.value
			this.$request('/app/search/hotSearch','post').then(res=>{
				this.hotSearch=res.content
			})
		},
		onShow() {
			this.historySearch=uni.getStorageSync('historySearch')?uni.getStorageSync('historySearch'):[]
		},
		methods:{
			confirm(e){
				this.historySearch.unshift(e.detail.value)
				this.historySearch=[...new Set(this.historySearch)]
				uni.setStorageSync('historySearch',this.historySearch)
				this.$linkTo('./search_result?value='+e.detail.value)
			},
			confirm1(e){
				this.searchValue=e
				this.historySearch.unshift(e)
				this.historySearch=[...new Set(this.historySearch)]
				uni.setStorageSync('historySearch',this.historySearch)
				this.$linkTo('./search_result?value='+e)
			},
			empty(){
				this.historySearch=[]
				uni.setStorageSync('historySearch',this.historySearch)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");

	.box {
		box-sizing: border-box;
	}
	.item{
		width: auto;
		height: 60rpx;
		padding: 0 26rpx;
		background: #EEEEEE;
		border-radius: 2px;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111111;
		line-height: 60rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	.searchNav{
		height: 68rpx;
		width: 100%;
		background-color: #EDEEEF;
		padding: 0 26rpx 0 36rpx;
		.title{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;

		}
		.qk{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;

		}
	}
	.searchBox {
		width: 100%;
		padding: 16rpx 24rpx 16rpx 20rpx;

		.search_bgc {
			width: 630rpx;
			height: 60rpx;
			background: #EDEEEF;
			border-radius: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			input {
				height: 100%;
				width: 80%;
				font-size: 24rpx;
			}
			.pl{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}
		.close{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

		}
	}
</style>
